import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/home/exercise_records/model/exercise_type.dart';
import 'package:share_fit/app/controllers/sports/sports_const.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/generated/locales.g.dart';

import 'logic.dart';

class SportManagementPage extends StatelessWidget {
  SportManagementPage({super.key});

  final logic = Get.put(SportManagementLogic());
  final state = Get.find<SportManagementLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackBtnIcon(onTap: () => logic.goBack()),
        actions: [
          GestureDetector(
            onTap: () => logic.onSaveMySportList(),
            child: SizedBox(
              width: 150.w,
              child: Text(LocaleKeys.save.ts, style: TextStyle(fontSize: 48.sp, color: Colors.green)),
            ),
          ),
        ],
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 40.w),
        child: ListView(
          children: [
            SizedBox(height: 60.h),
            Text(LocaleKeys.sports_my_sport_list_text.ts, style: TextStyle(fontSize: 52.sp)),
            SizedBox(height: 40.h),

            /// 已有运动列表
            GetBuilder<SportManagementLogic>(
              id: SportsConst.mySportList,
              builder: (_) {
                return GridView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: state.mySportList.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4,
                    mainAxisSpacing: 30.w,
                    crossAxisSpacing: 30.w,
                    childAspectRatio: .9,
                  ),
                  itemBuilder: (context, index) => _buildSportItemContainer(state.mySportList[index], 'remove'),
                );
              },
            ),

            //
            SizedBox(height: 60.h),
            Text(LocaleKeys.sports_optional_sport_list_text.ts, style: TextStyle(fontSize: 52.sp)),
            SizedBox(height: 40.h),

            /// 可选运动列表
            GetBuilder<SportManagementLogic>(
              id: SportsConst.optionalSportList,
              builder: (_) {
                return GridView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: state.optionalList.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4,
                    mainAxisSpacing: 30.w,
                    crossAxisSpacing: 30.w,
                    childAspectRatio: 1,
                  ),
                  itemBuilder: (context, index) => _buildSportItemContainer(state.optionalList[index], 'add'),
                );
              },
            ),
            SizedBox(height: 50.h),
          ],
        ),
      ),
    );
  }

  _buildSportItemContainer(ExerciseType exerciseType, String action) {
    return GestureDetector(
      onTap: () => action == 'add' ? logic.addToMySportList(exerciseType) : logic.removeFromMySportList(exerciseType),
      child: Container(
        decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(30.r)),
        child: Stack(
          fit: StackFit.expand,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SizedBox(
                  width: 90.h,
                  height: 90.h,
                  child: Image.asset(
                    exerciseType.getRealImg,
                    color: Colors.black,
                    fit: BoxFit.fill,
                  ),
                ),
                SizedBox(height: 10.h),
                Container(
                  alignment: Alignment.center,
                  child: Text(
                    exerciseType.getTypeName,
                    style: TextStyle(fontSize: 38.sp, height: 1.1),
                    textAlign: TextAlign.center,
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                )
              ],
            ),
            Positioned(
              right: 0,
              top: 0,
              child: action == 'add' ? Image.asset('assets/images/sports/plus_green.png') : Image.asset('assets/images/sports/minus_red.png'),
            ),
          ],
        ),
      ),
    );
  }
}
